<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- viewport是视口
        width: 设备宽度
        initial-scale: 初始缩放比例
        1.0代表初始缩放比例为1.0，即1:1
        值越大代表缩放比例越大
        minimum-scale: 允许用户缩放到最小比例
        maximum-scale: 允许用户缩放到最大比例

     -->
    <title>媒体查询</title>
    <style>
      /* 媒体查询 media query
            1、响应式布局 适配不同的终端，pc、平板、移动
            2、实现响应式布局
                原生媒体查询
                bootstrap
                rem + js
                vw vh
  
            语法 移动端适配
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
            一、内部引入  所有终端的样式写在一个样式文件中
            移动端样式
            @media screen and (max-width: 768px) {
                移动端的样式
            }
            平板样式
            @media screen and (min-width:768px) and (max-width:992px) {
                平板的样式
            }
            PC端样式
            @media screen and (min-width:992px) {
                PC端的样式
            }
            二、外部引入  每个终端写在各自的样式中
            移动端
            <link rel="stylesheet" href="" media="screen and (max-width:768px)">
            平板样式
            <link rel="stylesheet" href="" media="screen and (min-width:768px) and (max-width:992px)">
            PC端
            <link rel="stylesheet" href="" media="screen and (min-width:992px)">    
        */
      @media screen and (max-width: 768px) {
        body {
            background-color: red;
        }
      }
      @media screen and (min-width: 768px) and (max-width: 992px) {
        body {
            background-color: blue;
        }
      }
      @media screen and (min-width: 992px) {

      }
    </style>
  </head>
  <body></body>
</html>
